<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>参数传递</title>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div> 
    <div id="app3"></div> 
    <script src="../react-lib/babel.min.js"></script>
    <script src="../react-lib/react.development.js"></script>
    <script src="../react-lib/react-dom.development.js"></script> 
    <!-- 使用 PropTypes 进行类型检查 -->
    <script src="../react-lib/prop-types.js"></script> 
    <script type="text/babel">
    /**
    * 
    */
     function Person(params) {
         return (
                <ul>
                    <li>Name:{params.name}</li>
                    <li>Sex:{params.sex}</li>
                    <li>Age:{params.age}</li>
                </ul>
            )
     }

     // 指定默认值
     Person.defaultProps = {
        sex: '♂'
     }

     // 类型检查
     Person.propTypes={
         name: PropTypes.string.isRequired,
         sex: PropTypes.string,
         age: PropTypes.number.isRequired
     }
    const p1 = {
        name:'sf',
        sex: '♂',
        age: 16
    }
    ReactDOM.render(<Person name={p1.name} sex={p1.sex}/>,document.getElementById('app1'))

    const p2 = {
        name:'sf2',
        age: 17
    }
    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('app2'))

    // 使用拓展运算符传递参数
    const p3 = {
        name:'sf3',
        age: 18
    }
    ReactDOM.render(<Person {...p3}/>,document.getElementById('app3'))
    </script>
</body>
</html>